<template>
  <section class="article">
    <div class="left">
      <div class="article-container">
        <div class="article-header">
          <nuxt-link class="author-avatar" :to="'/user/' + articleData.userId + '?name=' + articleData.name">
            <img :src="articleData.avatar" alt="">
          </nuxt-link>
          <div class="article-header-data-panel">
            <nuxt-link class="author-name" :to="'/user/' + articleData.userId + '?name=' + articleData.name">
              {{ articleData.name }}
            </nuxt-link>
            <div class="article-desc">
              {{ $moment(articleData.createTime).fromNow() }} · 浏览 {{ articleData.pv }}
              <nuxt-link v-if="userData && userData.userId === articleData.userId" :to="'/edit/' + articleData.id">
                ·  编辑
              </nuxt-link>
            </div>
          </div>
        </div>
        <div class="article-cover">
          <img :src="articleData.articleImg" alt="">
        </div>
        <div class="article-title">
          {{ articleData.title }}
        </div>
        <mavon-editor :mode="'preview'" :md-str="articleData.content" />

        <!--<div class="article-support">-->
        <!--<img v-if="!articleData.hasSupport" src="~/assets/img/article-support-false@2x.png" alt="">-->
        <!--<img v-if="articleData.hasSupport" src="~/assets/img/article-support-true@2x.png" alt="">-->
        <!--<span>{{ articleData.supportCount }}</span>-->
        <!--</div>-->

        <div class="article-footer">
          <div class="tags">
            标签：
            <nuxt-link
              v-for="item of articleData.tags"
              :key="item.id"
              class="tag"
              :to="'/tag/' + item.id + '?name=' + item.name"
            >
              # {{ item.name }}
            </nuxt-link>
          </div>
          <div class="share">
            分享
          </div>
        </div>
      </div>
      <comment id="comment" ref="comment" :article-id="commentId" />
    </div>
    <div class="right">
      <div class="author-container">
        <user-panel :target-user-id="articleData.userId" :page="'article'" />
      </div>
      <btn-like
        :article-data="articleData"
        type="collect"
      />
      <btn-like
        :article-data="articleData"
        type="support"
      />
    </div>
  </section>
</template>

<script>
// import components
import UserPanel from '~/components/public/UserPanel'
import MavonEditor from '~/components/article/MavonEditor'
import BtnLike from '~/components/article/BtnLike'
import Comment from '~/components/comment/Comment'

// import util
import { debounce } from '~/assets/js/util'

export default {
  head() {
    return {
      title: this.articleData.title,
      meta: [
        { hid: 'description', name: 'description', content: this.articleData.title }
      ]
    }
  },
  components: {
    UserPanel,
    MavonEditor,
    BtnLike,
    Comment
  },
  validate({ params, redirect }) {
    if (params.id) {
      return true
    } else {
      return redirect('/sorry')
    }
  },
  data() {
    return {
      id: this.$route.params.id,
      articleData: {},
      commentId: ''
    }
  },
  async asyncData({ params, app, redirect }) {
    const data = await app.$request({
      context: app,
      method: 'get',
      url: `article/get/${params.id}`
    })
    if (!data) {
      redirect('/sorry')
    }
    return { articleData: data }
  },
  computed: {
    articleLikeNum() {
      if (this.article.likeNum > 99) {
        return '99+'
      } else if (this.article.likeNum > 999) {
        return '999+'
      } else {
        return this.article.likeNum
      }
    },
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    // console.log(this.$route.query.id)
    window.addEventListener('scroll', debounce(this.handleScroll, 100))
  },
  destroyed() {
    window.removeEventListener('scroll', debounce(this.handleScroll, 100))
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const offsetTop = document.querySelector('#comment').offsetTop
      if (scrollTop + 1000 > offsetTop) {
        this.commentId = this.id
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~assets/css/public";
.article {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;

  .article-container {
    box-sizing: border-box;
    overflow: hidden;
    width: 888px;
    min-height: 100vh;
    background: #fff;
    padding: 20px 0 60px;
    border: 1px solid $theme-color-border;
    position: relative;

    .article-header {
      display: flex;
      padding: 0 25px;
      .article-header-data-panel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        margin-left: 14px;
        .author-name {
          color: #222;
          line-height: 18px;
        }
        .article-desc {
          color: #999;
          line-height: 18px;

          a {
            color: $theme-color;
          }
        }
      }
      a.author-avatar {
        display: block;
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 42px;
        img {
          @include inner-img;
        }
      }
    }
    .article-title {
      font-size: 24px;
      color: #222;
      margin: 20px auto;
      padding: 0 25px;
      @include one-line-text;
    }
    .article-cover {
      padding: 25px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .article-support {
      margin: 50px auto 60px;
      display: flex;
      justify-content: center;

      img {
        width: 100px;
        height: 100px;
      }
    }
    .article-footer {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      color: $theme-color;
      font-size: 12px;
      padding-top: 12px;
      margin: 0 25px;
      border-top: 2px solid $theme-color-border;

      a.tag {
        color: $theme-color;
        margin-right: 10px;
      }
    }
  }
  .author-container {
    box-sizing: border-box;
    border: 1px solid $theme-color-border;
    overflow: hidden;
    width: 300px;

  }
}
</style>
